@import '{}/imports/ui/stylesheets/utils.less';

@-webkit-keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}


// Notification message (e.g., when unable to connect)
.notifications {
  .position(absolute, auto, auto, 10px, 50%, 280px);
  transform: translate3d(-50%, 0, 0);
  z-index: 1;

  @media screen and (min-width: 40em) {
    transform: translate3d(0, 0, 0);
    bottom: auto;
    right: 1rem;
    top: 1rem;
    left: auto;
  }

  .notification {
    .font-s1;
    background: rgba(51,51,51, .85);
    color: @color-empty;
    margin-bottom: .25rem;
    padding: .5rem .75rem;
    position: relative;
    width: 100%;

    .icon-sync {
      .position(absolute, 30%, auto, auto, 1rem);
      animation: spin 2s infinite linear;
      color: @color-empty;
      font-size: 1.5em;
    }

    .meta {
      overflow: hidden;
      padding-left: 3em;

      .title-notification {
        .title-caps;
        display: block;
      }

      .description {
        display: block;
      }
    }
  }
}
